import React, { Component } from "react";
import "./tabeside.less";
import Fade from "@material-ui/core/Fade";
import Slide from "@material-ui/core/Slide";

export default class tabeside extends Component {
  state={
    addstyle:0
  }
  render() {
    return (
      <div
        className="tabside"
        style={{ display: this.props.tabarshow ? "block" : "none" }}
      >
        <Fade in={this.props.tabarshow}>
          <div className="yingyin" onClick={this.closebarside.bind(this)}></div>
        </Fade>

        <Slide
          in={this.props.tabarshow}
          direction="right"
          mountOnEnter
          unmountOnExit
        >
          <ul className="content">
            {this.props.subjectdata.map((item,index) => {
              return (
                <li key={item.id} onClick={this.checklist.bind(this,index)} className={this.state.addstyle===index?'active':''}>
                  {item.title}
                </li>
              );
            })}
          </ul>
        </Slide>
      </div>
    );
  }
  closebarside() {
    this.props.closebarside();
  }
  checklist(index){
    console.log(index);
    this.setState({
      addstyle:index
    })
  }
}
